import React, { Component } from "react";
import { Card, Select, Input, Button, Icon, Table, message } from "antd";
import { reqProducts, reqSearchProducts, reqUpdateStatus } from "../../api";

class ProductHome extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      products: [],
      loading: false,
      searchName: "",
      searchType: "productName",
    };
  }
  getProducts = (pageNum) => {
    this.pageNum = pageNum;
    this.setState({ loading: true });
    const { searchName, searchType } = this.state;
    let result;
    if (searchName) {
      result = await reqSearchProducts({
        pageNum,
        pageSize: 2,
        searchName,
        searchType,
      });
    } else {
      result = await reqProducts(pageNum, 2);
    }
    this.setState({
      loading: false,
    });
    if (result.status == 0) {
      const { total, list } = result.data;
      this.setState({
        total,
        products: list,
      });
    }
  };
  updataStatus = (productId, status) => {
    const result = await reqUpdateStatus(productId, status);
    if (result.status === 0) {
      message.success("更新商品成功");
      this.getProducts(this.pageNum);
    }
  };
  componentWillMount() {
    this.initColumns;
  }
  componentDidMount() {
    this.getProducts(1);
  }
  initColumns = () => {
    this.columns = [
      {
        title: "商品名称",
        dataIndex: "name",
      },
      {
        title: "商品描述",
        dataIndex: "desc",
      },
      {
        title: "价格",
        dataIndex: "price",
        render: (price) => "￥" + price,
      },
      {
        title: "状态",
        render: (product) => {
          const { status, _id } = product;
          const newStatus = status === 1 ? 2 : 1;
          return (
            <span>
              <Button
                type="primary"
                onClick={() => this.updateStatus(_id, newStatus)}
              >
                {status === 1 ? "下架" : "上架"}
              </Button>
              <span>{status === 1 ? "在售" : "已下架"}</span>
            </span>
          );
        },
      },
      {
        title: "操作",
        render: (product) => {
          return (
            <span>
              <span
                onClick={() =>
                  this.props.history.push("/product/detail", { product })
                }
              >
                详情
              </span>
              <span
                onClick={() => {
                  this.props.history.push("/product/addupdate", product);
                }}
              >
                修改
              </span>
            </span>
          );
        },
      },
    ];
  };
  render() {
    const title = (
      <span>
        <Select
          value={searchType}
          style={{ width: 150 }}
          onChange={(value) => this.setState({ searchType: value })}
        >
          <Option>按名称搜索</Option>
          <Option>按描述搜索</Option>
        </Select>
        <Input
          placeholder="关键字"
          style={{ width: 150, margin: "0 15px" }}
          value={searchName}
          onChange={(e) => this.setState({ searchName: e.target.value })}
        />
        <Button type="primary" onClick={() => this.getProducts(1)}>
          搜索
        </Button>
      </span>
    );
    return (
      <Card>
        <Table rowKey="_id" columns={this.columns} dataSource={products} />
      </Card>
    );
  }
}

export default ProductHome;
